<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../css/header.css">
    <script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
</head>
<body>
<div class="header">
    <div class="container">
        <div class="left">
            <a href="">
                <img src="../images/topLogo.png" alt="">
            </a>
            <span>
                    用户注册
                </span>
        </div>
        <div class="right">
            已有账号？马上去 <a href="">登录>></a>
        </div>
    </div>
</div>
<div class="loginPage regeister">
    <div class="container clearfix">
        <div class="left">
            <img src="../images/loginBg.png" alt="">
        </div>
        <div class="right">
            <p class="quickLogin">
                快捷注册
            </p>
            <form action="">
                <div class="regeisterCode ">
                    <p class="textInput">
                        <span>用户名：</span>
                        <input type="text" placeholder="请输入手机号码" id="userPhone">
                    </p>
                    <p class="errorTips userNameTips">
                        <!--用户名已被注册-->
                    </p>
                </div>
                <div class="regeisterCode">
                    <p class="textInput">
                        <span>密码：</span>
                        <input type="text" placeholder="请输入密码" id="userPassword">
                    </p>
                    <p class="errorTips userPasswordTips">
                        <!--用户名已被注册-->
                    </p>
                </div>
                <div class="formText messCode">
                    <p class="textInput">
                        <span>验证码：</span>
                        <input type="text" placeholder="请输入验证码" class="regeisterMsg" id="regeisterMsg">
                        <input class="codePic getCode" id="getCode" type="button" value="获取短信验证码">
                    </p>
                </div>
                <div class="remberLogin">
                    <label for="remberLogin" class="remberLoginLable">
                        <input type="checkbox" id="remberLogin">
                        <label class="label" for="remberLogin"></label>
                        <span class="noselect" >阅读并接受</span>
                    </label>
                    <a id="agreement">《链百科用户协议》</a>
                </div>
                <div class="loginBtn">
                    <input type="button" value="注册" id="regeister">
                </div>
            </form>
        </div>
    </div>
</div>
<div class="footer">
    <p >
        Copyright：2018 链百科 鄂ICP证030173号
    </p>
    <p>
        武汉市代劳科技有限责任公司-链百科团队出品
    </p>
</div>
<div class="layer">
    <div class="tc">
        <div class="tcTop">
            <a  class="tcClose">
                <img src="../images/close.png" alt="">
            </a>
        </div>
        <p class="tcTitle">链百科注册协议</p>
        <div class="tcContent">
            <p>
                本协议为链百科《使用协议》的第一版，自2017年10月16日公布。
            </p>
            <p>
                请您务必审慎阅读，充分理解协议中相关条款内容，特别是粗体标注的内容。您一旦注册链百科，即视为您已了解并完全同意本协议各项内容，包括链百科对使用协议随时所做的任何修改。如您不同意本协议/或随时对其的修改，请您立即停止注册使用链百科及使用链百科所提供的全部服务。
            </p>
            <p>
                1、接受条款
            </p>
            <p>
                1.1链百科网的运营者及相关关联公司（以下称为“链百科”）根据本使用协议的条款及不时发布的规则为您提供基于链百科（包括链百科pc端、链百科及链百科相关客户端、移动网页端等）的互联网服务。本协议的条款可由链百科随时修改，修改后的使用协议在网站上一经公布即有效代替原来的使用协议。您一旦在链百科网注册，即成为链百科用户（以下简称“用户”或“您”），并受本协议的约束。
            </p>
            <p>
                1.2链百科网的运营者及相关关联公司（以下称为“链百科”）根据本使用协议的条款及不时发布的规则为您提供基于链百科（包括链百科pc端、链百科及链百科相关客户端、移动网页端等）的互联网服务。本协议的条款可由链百科随时修改，修改后的使用协议在网站上一经公布即有效代替原来的使用协议。您一旦在链百科网注册，即成为链百科用户（以下简称“用户”或“您”），并受本协议的约束。
            </p>
            <p>
                1.3链百科网的运营者及相关关联公司（以下称为“链百科”）根据本使用协议的条款及不时发布的规则为您提供基于
            </p>
            <p>
                1.4链百科网的运营者及相关关联公司（以下称为“链百科”）根据本使用协议的条款及不时发布的规则为您提供基于
            </p>
            <p>
                1.5链百科网的运营者及相关关联公司（以下称为“链百科”）根据本使用协议的条款及不时发布的规则为您提供基于
            </p>
        </div>
    </div>
</div>
<script src="../layer/layer.js"></script>
<script>
    var timer =null
    var count =60
    //查看协议
    $('#agreement').on('click',function () {
        if($('.layer').css('display')=='none'){
            $('.layer').fadeIn(300)
        }
    })
    $('.tcClose').on('click',function () {
        $('.layer').fadeOut(300)
    });
    function checkTel(){
        var reg2 =/^(((13|14|15|16|18|17|19)\d{9}))$/;
        if( !reg2.test($('#userPhone').val()) ){
            this.telError =true
            return false;
        }
        return true
    }
    //获取验证码
    //倒计时
    function startCount(){
        var that =this
        timer =setInterval(function (res) {
            count --
            $('#getCode').val(count+'s后重发')

            if(count==0){
                $('#getCode').val('获取验证码')
                clearInterval(timer)
                $('#getCode').removeClass('forbiden')
                $('#getCode').attr('disabled',false)
                that.count =60
            }
        },1000)
    }
    //获取验证码
    $('#getCode').on('click',function (e) {
        if(!$('#userPhone').val()){
            layer.tips('请输入手机号码', '#userPhone', {
                tips: 2
            });
            return false
        }
        if(checkTel()){
            startCount()
            var that =this
            $('#getCode').val('60s后重发')
            $('#getCode').addClass('forbiden')
            $('#getCode').attr('disabled','disabled')
        }else{
            layer.tips('手机号码格式错误', '#userPhone', {
                tips: 2
            });
        }
    })
    //点击注册
    $('#regeister').on('click',function () {
        if(!$('#userPhone').val()){
            layer.tips('请输入手机号码', '#userPhone', {
                tips: 2
            });
            return false
        }
        if(!checkTel()){
            layer.tips('手机号码格式错误', '#userPhone', {
                tips: 2
            });
            return false
        }
        if(!$('#userPassword').val()){
            layer.tips('请输入密码', '#userPassword', {
                tips: 2
            });
            return false
        }
        if(!$('#regeisterMsg').val()){
            layer.tips('请输入验证码', '#regeisterMsg', {
                tips: 2
            });
            return false
        }
        if(!$('#remberLogin')[0].checked){
            layer.tips('请勾选协议', '#remberLogin', {
                tips: 4
            });
            return false
        }
        $('.userNameTips').css('visibility','visible').html('用户名已存在')
//        $('.userNameTips span')
        return false
        //注册验证部分
    })

</script>
</body>
</html>